@workday/canvas-kit-docs 5.3.17 → 5.4.0-next.1

package/dist/mdx/react/tabs/examples/Icons.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import {space} from '@workday/canvas-kit-react/tokens';
+import {starIcon, searchIcon, selectIcon, shareIcon} from '@workday/canvas-system-icons-web';
+import {Tabs} from '@workday/canvas-kit-react/tabs';
+
+export default () => {
+  return (
+    <Tabs>
+      <Tabs.List>
+        <Tabs.Item hasIcon>
+          <Tabs.Item.Icon icon={starIcon} />
+          <Tabs.Item.Text>First Tab</Tabs.Item.Text>
+        </Tabs.Item>
+        <Tabs.Item hasIcon>
+          <Tabs.Item.Icon icon={searchIcon} />
+          <Tabs.Item.Text>Second Tab</Tabs.Item.Text>
+        </Tabs.Item>
+        <Tabs.Item hasIcon>
+          <Tabs.Item.Icon icon={selectIcon} />
+          <Tabs.Item.Text>Third Tab</Tabs.Item.Text>
+        </Tabs.Item>
+        <Tabs.Item hasIcon>
+          <Tabs.Item.Icon icon={shareIcon} />
+          <Tabs.Item.Text>Fourth Tab</Tabs.Item.Text>
+        </Tabs.Item>
+      </Tabs.List>
+      <div style={{marginTop: space.m}}>
+        <Tabs.Panel>Contents of First Tab</Tabs.Panel>
+        <Tabs.Panel>Contents of Second Tab</Tabs.Panel>
+        <Tabs.Panel>Contents of Third Tab</Tabs.Panel>
+        <Tabs.Panel>Contents of Fourth Tab</Tabs.Panel>
+      </div>
+    </Tabs>
+  );
+};

package/dist/mdx/react/tabs/examples/OverflowTabs.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+import {Tabs, useTabsModel} from '@workday/canvas-kit-react/tabs';
+import {HStack} from '@workday/canvas-kit-labs-react';
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+
+type MyTabItem = {
+  id: string;
+  text: React.ReactNode;
+  contents: string;
+};
+
+export default () => {
+  const [items] = React.useState<MyTabItem[]>([
+    {id: 'first', text: 'First Tab', contents: 'Contents of First Tab'},
+    {id: 'second', text: 'Second Tab', contents: 'Contents of Second Tab'},
+    {id: 'third', text: 'Third Tab', contents: 'Contents of Third Tab'},
+    {id: 'fourth', text: 'Fourth Tab', contents: 'Contents of Fourth Tab'},
+    {id: 'fifth', text: 'Fifth Tab', contents: 'Contents of Fifth Tab'},
+    {id: 'sixth', text: 'Sixth Tab', contents: 'Contents of Sixth Tab'},
+    {id: 'seventh', text: 'Seventh Tab', contents: 'Contents of Seventh Tab'},
+  ]);
+  const model = useTabsModel({
+    items,
+  });
+  const [containerWidth, setContainerWidth] = React.useState('100%');
+  return (
+    <div style={{width: containerWidth}}>
+      <Tabs model={model}>
+        <Tabs.List overflowButton={<Tabs.OverflowButton>More</Tabs.OverflowButton>}>
+          {(item: MyTabItem) => <Tabs.Item name={item.id}>{item.text}</Tabs.Item>}
+        </Tabs.List>
+        <Tabs.Menu.Popper>
+          <Tabs.Menu.Card maxWidth={300} maxHeight={200}>
+            <Tabs.Menu.List>
+              {(item: MyTabItem) => <Tabs.Menu.Item name={item.id}>{item.text}</Tabs.Menu.Item>}
+            </Tabs.Menu.List>
+          </Tabs.Menu.Card>
+        </Tabs.Menu.Popper>
+        <Tabs.Panels>
+          {(item: MyTabItem) => (
+            <Tabs.Panel marginTop="m" name={item.id}>
+              {item.contents}
+            </Tabs.Panel>
+          )}
+        </Tabs.Panels>
+      </Tabs>
+      <hr />
+      <h4>Change tab container size</h4>
+      <HStack spacing="xs">
+        <SecondaryButton onClick={() => setContainerWidth('100%')}>100%</SecondaryButton>
+        <SecondaryButton onClick={() => setContainerWidth('500px')}>500px</SecondaryButton>
+        <SecondaryButton onClick={() => setContainerWidth('235px')}>235px</SecondaryButton>
+        <SecondaryButton onClick={() => setContainerWidth('150px')}>150px</SecondaryButton>
+      </HStack>
+    </div>
+  );
+};

package/dist/mdx/react/tabs/examples/SinglePanel.tsx

@@ -34,7 +34,7 @@ export default () => {
         </Tabs.Item>
       </Tabs.List>
       <Tabs.Panel style={{marginTop: space.m}} hidden={undefined} id="mytab-panel">
-        {contents[model.state.activeTab]}
+        {contents[model.state.selectedIds[0]]}
       </Tabs.Panel>
     </Tabs>
   );

package/dist/mdx/react/text-area/TextArea.mdx

@@ -23,7 +23,7 @@ Text Areas allow users to enter and edit multiple lines of text.
 ## Installation
 
 ```sh
-yarn add @workday/canvas-kit-react
+yarn add @workday/canvas-kit-labs-react
 ```
 
 ## Usage

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "5.3.17",
+  "version": "5.4.0-next.1+bf910ff4",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -50,7 +50,7 @@
   ],
   "dependencies": {
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-react": "^5.3.17"
+    "@workday/canvas-kit-react": "^5.4.0-next.1+bf910ff4"
   },
   "devDependencies": {
     "fs-extra": "^10.0.0",
@@ -58,5 +58,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "^3.8.3"
   },
-  "gitHead": "0e5c733deb9079d061b788c205e73c54c55e7c58"
+  "gitHead": "bf910ff480fb9237ea4d70e95293de7bdffdb138"
 }