Merge branch 'main' into 8905-notification-refactor-inline-toast

.prettierignore

@@ -48,6 +48,7 @@ packages/icons-react/next/**
 
 # Examples
 **/examples/**
+!packages/themes/examples/**
 
 # Yarn
 **/.yarn/**
@@ -57,3 +58,6 @@ packages/icons-react/next/**
 
 # Templates
 **/*.template.*
+
+# Nextjs
+.next

packages/carbon-react/src/components/InlineLoading/InlineLoading.stories.js

@@ -0,0 +1,82 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, { useState } from 'react';
+import { Button, InlineLoading } from 'carbon-components-react';
+
+export default {
+  title: 'Components/InlineLoading',
+
+  parameters: {
+    component: InlineLoading,
+  },
+};
+
+export const _InlineLoading = () => (
+  <InlineLoading
+    status="active"
+    iconDescription="Active loading indicator"
+    description="Loading data..."
+  />
+);
+
+export const UxExample = () => {
+  function MockSubmission({ children }) {
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [success, setSuccess] = useState(false);
+    const [description, setDescription] = useState('Submitting...');
+    const [ariaLive, setAriaLive] = useState('off');
+    const handleSubmit = () => {
+      setIsSubmitting(true);
+      setAriaLive('assertive');
+
+      // Instead of making a real request, we mock it with a timer
+      setTimeout(() => {
+        setIsSubmitting(false);
+        setSuccess(true);
+        setDescription('Submitted!');
+
+        // To make submittable again, we reset the state after a bit so the user gets completion feedback
+        setTimeout(() => {
+          setSuccess(false);
+          setDescription('Submitting...');
+          setAriaLive('off');
+        }, 1500);
+      }, 2000);
+    };
+
+    return children({
+      handleSubmit,
+      isSubmitting,
+      success,
+      description,
+      ariaLive,
+    });
+  }
+
+  return (
+    <MockSubmission>
+      {({ handleSubmit, isSubmitting, success, description, ariaLive }) => (
+        <div style={{ display: 'flex', width: '300px' }}>
+          <Button kind="secondary" disabled={isSubmitting || success}>
+            Cancel
+          </Button>
+          {isSubmitting || success ? (
+            <InlineLoading
+              style={{ marginLeft: '1rem' }}
+              description={description}
+              status={success ? 'finished' : 'active'}
+              aria-live={ariaLive}
+            />
+          ) : (
+            <Button onClick={handleSubmit}>Submit</Button>
+          )}
+        </div>
+      )}
+    </MockSubmission>
+  );
+};

packages/carbon-react/src/components/InlineLoading/index.js

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export { InlineLoading } from 'carbon-components-react';

packages/carbon-react/src/components/Pagination/Pagination.stories.js

@@ -0,0 +1,67 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import { Pagination } from 'carbon-components-react';
+
+export default {
+  title: 'Components/Pagination',
+  decorators: [(story) => <div style={{ maxWidth: '800px' }}>{story()}</div>],
+
+  parameters: {
+    component: Pagination,
+  },
+};
+
+export const _Default = () => (
+  <Pagination
+    id="pagination-1"
+    pageSize={10}
+    pageSizes={[10, 20, 30, 40, 50]}
+    itemsPerPageText="Items per page:"
+    totalItems={103}
+  />
+);
+
+export const MultiplePaginationComponents = () => {
+  return (
+    <div>
+      <Pagination
+        id="pagination-2"
+        pageSize={10}
+        pageSizes={[10, 20, 30, 40, 50]}
+        itemsPerPageText="Items per page:"
+        totalItems={103}
+      />
+      <Pagination
+        id="pagination-3"
+        pageSize={10}
+        pageSizes={[10, 20, 30, 40, 50]}
+        itemsPerPageText="Items per page:"
+        totalItems={103}
+      />
+    </div>
+  );
+};
+
+export const PaginationWithCustomPageSizesLabel = () => {
+  return (
+    <div>
+      <Pagination
+        pageSizes={[
+          { text: 'Ten', value: 10 },
+          { text: 'Twenty', value: 20 },
+          { text: 'Thirty', value: 30 },
+          { text: 'Fourty', value: 40 },
+          { text: 'Fifty', value: 50 },
+        ]}
+        itemsPerPageText="Items per page:"
+        totalItems={103}
+      />
+    </div>
+  );
+};

packages/carbon-react/src/components/Pagination/index.js

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export { Pagination } from 'carbon-components-react';

packages/carbon-react/src/components/Select/Select.stories.js

@@ -0,0 +1,93 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import {
+  Select,
+  SelectItem,
+  SelectItemGroup,
+  SelectSkeleton,
+} from 'carbon-components-react';
+
+export default {
+  title: 'Components/Select',
+  decorators: [(story) => <div style={{ width: '400px' }}>{story()}</div>],
+  parameters: {
+    component: Select,
+    subcomponents: {
+      SelectItem,
+      SelectItemGroup,
+      SelectSkeleton,
+    },
+  },
+};
+
+export const _Default = () => {
+  return (
+    <div>
+      <Select
+        id="select-1"
+        defaultValue="placeholder-item"
+        labelText="Select an option"
+        helperText="Optional helper text">
+        <SelectItem
+          disabled
+          hidden
+          value="placeholder-item"
+          text="Choose an option"
+        />
+        <SelectItemGroup label="Category 1">
+          <SelectItem value="option-1" text="Option 1" />
+          <SelectItem value="option-2" text="Option 2" />
+        </SelectItemGroup>
+        <SelectItemGroup label="Category 2">
+          <SelectItem value="option-3" text="Option 3" />
+          <SelectItem value="option-4" text="Option 4" />
+        </SelectItemGroup>
+      </Select>
+    </div>
+  );
+};
+
+export const Inline = () => {
+  return (
+    <div>
+      <Select
+        inline
+        id="select-1"
+        defaultValue="placeholder-item"
+        labelText=""
+        helperText="Optional helper text">
+        <SelectItem
+          disabled
+          hidden
+          value="placeholder-item"
+          text="Choose an option"
+        />
+        <SelectItemGroup label="Category 1">
+          <SelectItem value="option-1" text="Option 1" />
+          <SelectItem value="option-2" text="Option 2" />
+        </SelectItemGroup>
+        <SelectItemGroup label="Category 2">
+          <SelectItem value="option-3" text="Option 3" />
+          <SelectItem value="option-4" text="Option 4" />
+        </SelectItemGroup>
+      </Select>
+    </div>
+  );
+};
+
+export const _Skeleton = () => (
+  <div
+    aria-label="loading select"
+    aria-live="assertive"
+    role="status"
+    tabIndex="0" // eslint-disable-line jsx-a11y/no-noninteractive-tabindex
+  >
+    <SelectSkeleton />
+  </div>
+);

packages/carbon-react/src/components/Select/index.js

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export { Select } from 'carbon-components-react';

packages/carbon-react/src/components/TextArea/TextArea.stories.js

@@ -0,0 +1,32 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import { TextArea, TextAreaSkeleton } from 'carbon-components-react';
+
+export default {
+  title: 'Components/TextArea',
+  parameters: {
+    component: TextArea,
+    subcomponents: {
+      TextAreaSkeleton,
+    },
+  },
+};
+
+export const Default = () => (
+  <TextArea
+    labelText="Text Area label"
+    helperText="Optional helper text"
+    placeholder="Placeholder text"
+    cols={50}
+    rows={4}
+    id="text-area-1"
+  />
+);
+
+export const Skeleton = () => <TextAreaSkeleton />;

packages/carbon-react/src/components/TextArea/index.js

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export { TextArea, TextAreaSkeleton } from 'carbon-components-react';