equinor · oddvernes · Nov 17, 2022 · Nov 11, 2022 · Nov 11, 2022
@@ -62,8 +62,9 @@ import { Accordion } from '@equinor/eds-core-react'
 
 <Story id="surfaces-accordion--header" />
 
-### Compact
+<!--Re-enable once compact has been implemented for Accordion-->
+<!--### Compact
 
 Compact `Accordion` using `EdsProvider`
 
-<Story id="surfaces-accordion--compact" />
+<Story id="surfaces-accordion--compact" />-->
@@ -216,7 +216,7 @@ export const Header: Story<AccordionProps> = () => {
   )
 }
 
-export const Compact: Story<AccordionProps> = () => {
+/* export const Compact: Story<AccordionProps> = () => {
   const [density, setDensity] = useState<Density>('comfortable')
 
   useEffect(() => {
@@ -244,4 +244,4 @@ export const Compact: Story<AccordionProps> = () => {
       </EdsProvider>
     </>
   )
-}
+} */
@@ -64,8 +64,9 @@ Banners can supplement their message using a supporting icon.
 
 <Story id="feedback-banner--text-and-icon-and-action" />
 
-### Compact
+<!--Re-enable when compact is implemented for Banner-->
+<!--### Compact
 
 Compact `Banner` using `EdsProvider`.
 
-<Story id="feedback-banner--compact" />
+<Story id="feedback-banner--compact" />-->
@@ -135,7 +135,7 @@ export const TextAndIconAndAction: Story<BannerProps> = () => (
 )
 TextAndIconAndAction.storyName = 'Text and icon and actions'
 
-export const Compact: Story<BannerProps> = () => {
+/* export const Compact: Story<BannerProps> = () => {
   const [density, setDensity] = useState<Density>('comfortable')
 
   useEffect(() => {
@@ -174,4 +174,4 @@ export const Compact: Story<BannerProps> = () => {
       </Banner>
     </EdsProvider>
   )
-}
+} */
@@ -106,8 +106,9 @@ Title is optional.
 
 <Story id="feedback-dialog--no-title" />
 
-### Compact
+<!--Re-enable when compact is implemented for Dialog-->
+<!--### Compact
 
 Compact `Dialog` using `EdsProvider`.
 
-<Story id="feedback-dialog--compact" />
+<Story id="feedback-dialog--compact" />-->
@@ -303,7 +303,7 @@ export const NoTitle: Story<DialogProps> = () => {
 }
 NoTitle.storyName = 'No title'
 
-export const Compact: Story<DialogProps> = () => {
+/* export const Compact: Story<DialogProps> = () => {
   const [isOpen, setIsOpen] = useState(false)
   const [density, setDensity] = useState<Density>('comfortable')
   const handleOpen = () => {
@@ -341,4 +341,4 @@ export const Compact: Story<DialogProps> = () => {
       </Dialog>
     </EdsProvider>
   )
-}
+} */
@@ -123,11 +123,12 @@ To prevent dismissing `Popover` with click outside or escape key, simply leave o
 
 <Story id="data-display-popover--persistent-popover"/>
 
-### Compact
+<!--Re-enable once compact has been implemented for popover-->
+<!--### Compact
 
 Compact `Popover` using `EdsProvider`.
 
-<Story id="data-display-popover--compact"/>
+<Story id="data-display-popover--compact"/>-->
 
 ### App launcher
 
@@ -140,4 +141,4 @@ Provides navigation for applications related to the application the user is curr
   <li>Note that if the label is longer than the maximum width, it will be truncated and should have a tooltip provided.</li>
 </ul>
 
-<Story id="data-display-popover--app-launcher"/>
+<Story id="data-display-popover--app-launcher"/>
@@ -314,7 +314,7 @@ export const PersistentPopover: Story<PopoverProps> = () => {
 }
 PersistentPopover.storyName = 'Persistent popover'
 
-export const Compact: Story<PopoverProps> = () => {
+/* export const Compact: Story<PopoverProps> = () => {
   const [isOpen, setIsOpen] = useState<boolean>(false)
   const anchorRef = useRef<HTMLButtonElement>(null)
 
@@ -355,7 +355,7 @@ export const Compact: Story<PopoverProps> = () => {
       </Popover>
     </EdsProvider>
   )
-}
+} */
 
 export const AppLauncher: Story<PopoverProps> = () => {
   const Wrapper = styled.div`

@@ -49,11 +49,3 @@ import { Snackbar } from '@equinor/eds-core-react'
 A snackbar can contain a single action, a single text button that lets users take action on a process performed by the app.
 
 <Story id="feedback-snackbar--with-action"/>
-
-### Compact
-
-Compact `Snackbar` using `EdsProvider`
-
-<Story id="feedback-snackbar--compact"/>
-
-
@@ -78,28 +78,3 @@ export const WithAction: Story<SnackbarProps> = () => {
   )
 }
 WithAction.storyName = 'With action'
-
-export const Compact: Story<SnackbarProps> = () => {
-  const [open, setOpen] = useState(false)
-  const [density, setDensity] = useState<Density>('comfortable')
-
-  useEffect(() => {
-    // Simulate user change
-    setDensity('compact')
-  }, [density])
-
-  return (
-    <EdsProvider density={density}>
-      <Button type="button" onClick={() => setOpen(true)}>
-        Show a simple compact snackbar
-      </Button>
-      <Snackbar
-        open={open}
-        onClose={() => setOpen(false)}
-        autoHideDuration={5000}
-      >
-        Message goes here
-      </Snackbar>
-    </EdsProvider>
-  )
-}
@@ -89,8 +89,9 @@ const Demo = () => {
 
 ## Examples
 
-### Compact
+<!--Re-enable when compact is implemented for TableofContents-->
+<!--### Compact
 
 Compact `TableOfContents` using `EdsProvider`.
 
-<Story id="navigation-tableofcontents--compact" />
+<Story id="navigation-tableofcontents--compact" />-->
@@ -195,7 +195,7 @@ export const Introduction: Story<TableOfContentsProps> = (args) => {
   )
 }
 
-export const Compact: Story<TableOfContentsProps> = () => {
+/* export const Compact: Story<TableOfContentsProps> = () => {
   const [density, setDensity] = useState<Density>('comfortable')
 
   useEffect(() => {
@@ -358,4 +358,4 @@ export const Compact: Story<TableOfContentsProps> = () => {
       </aside>
     </EdsProvider>
   )
-}
+} */
@@ -124,8 +124,9 @@ The scrollbar styles for `Tabs.List` can be overwritten.
 
 <Story id="navigation-tabs--overflow-scroll-styled" />
 
-### Compact
+<!--Re-enable when compact is implemented for Tabs-->
+<!--### Compact
 
 Compact `Tabs` using `EdsProvider`.
 
-<Story id="navigation-tabs--compact" />
+<Story id="navigation-tabs--compact" />-->
@@ -502,7 +502,7 @@ export const OverflowScrollStyled: Story<TabsProps> = () => {
 }
 OverflowScrollStyled.storyName = 'Overflow with customized scrollbar'
 
-export const Compact: Story<TabsProps> = () => {
+/* export const Compact: Story<TabsProps> = () => {
   const focusedRef = useRef<HTMLButtonElement>(null)
   const [density, setDensity] = useState<Density>('comfortable')
 
@@ -534,4 +534,4 @@ Compact.decorators = [
       </Stack>
     )
   },
-]
+] */
@@ -42,8 +42,9 @@ The actions on the far-right are standard.
 
 <Story id="navigation-topbar--with-search-and-icons" />
 
-### Compact
+<!--Re-enable when compact is implemented for TopBar-->
+<!--### Compact
 
 Compact `TopBar` using `EdsProvider`.
 
-<Story id="navigation-topbar--compact" />
+<Story id="navigation-topbar--compact" />-->
@@ -118,7 +118,7 @@ export const WithSearchAndIcons: Story<TopbarProps> = (): JSX.Element => {
 }
 WithSearchAndIcons.storyName = 'With search and icons'
 
-export const Compact: Story<TopbarProps> = (): JSX.Element => {
+/* export const Compact: Story<TopbarProps> = (): JSX.Element => {
   const Icons = styled.div`
     display: flex;
     align-items: center;
@@ -159,4 +159,4 @@ export const Compact: Story<TopbarProps> = (): JSX.Element => {
       </TopBar>
     </EdsProvider>
   )
-}
+} */