Adds RatingLinearProgress component

README.md

@@ -75,6 +75,13 @@ The Product Attributes component displays a list of product attributes.
 
 ![Product Attributes component](docs/components/product-attributes.png)
 
+### Rating Linear Progress Attributes
+
+The Rating Linear Progress component displays a styled Linear Progress bar that
+displays the rating for a product.
+
+![Rating Linear Progress component](docs/components/rating-linear-progress.png)
+
 ### Save Coupon
 
 The Save Coupon component displays a message indicating how much the consumer

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditus/react-web-retail",
-  "version": "1.0.12",
+  "version": "1.0.14",
   "description": "A set of reusable React web components based on Material UI for retail applications.",
   "private": false,
   "main": "dist/index.js",

src/components/index.js

@@ -6,5 +6,6 @@ export { default as LowStock } from './low-stock/low-stock';
 export { default as Price } from './price/price';
 export { default as ProductAttribute } from './product-attribute/product-attribute';
 export { default as ProductAttributes } from './product-attributes/product-attributes';
+export { default as RatingLinearProgress } from './rating-linear-progress/rating-linear-progress';
 export { default as SaveCoupon } from './save-coupon/save-coupon';
 export { default as Sponsored } from './sponsored/sponsored';

src/components/rating-linear-progress/rating-linear-progress.jsx

@@ -0,0 +1,40 @@
+//
+// Copyright (c) DITUS INC. All rights reserved. See LICENSE file in the project
+// root for details.
+//
+import React from 'react';
+import {
+  LinearProgress,
+} from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+const StyledLinearProgress = styled(LinearProgress)(({ theme }) => ({
+  '&.MuiLinearProgress-root': {
+    height: 20,
+    borderRadius: 5,
+    borderWidth: 1,
+    borderColor: theme.palette.grey[200],
+    borderStyle: 'solid',
+  },
+  '&.MuiLinearProgress-colorPrimary': {
+    backgroundColor: theme.palette.grey[100],
+  },
+}));
+
+/**
+ * Represents a linear progress bar that displays the rating of a product.
+ * @param {*} props The properties of the component.
+ * @returns {HTMLElement} An HTML element representing the component.
+ */
+function RatingLinearProgress(props) {
+  return (
+    <StyledLinearProgress
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+      variant="determinate"
+      color="primary"
+    />
+  );
+}
+
+export default RatingLinearProgress;

src/stories/RatingLinearProgress.stories.jsx

@@ -0,0 +1,30 @@
+/* eslint-disable jsdoc/require-jsdoc */
+/* eslint-disable react/jsx-props-no-spreading */
+import React from 'react';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { CssBaseline } from '@mui/material';
+import RatingLinearProgress from '../components/rating-linear-progress/rating-linear-progress';
+
+export default {
+  title: 'Components/RatingLinearProgress',
+  component: RatingLinearProgress,
+  argTypes: {
+  },
+};
+
+const theme = createTheme({
+});
+
+function Template(args) {
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <RatingLinearProgress {...args} />
+    </ThemeProvider>
+  );
+}
+
+export const Primary = Template.bind({});
+Primary.args = {
+  value: 50,
+};